<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="cont">
        <div class="box" id="myid" myid="3">
            <h1>world</h1>
            <span>12121</span> hello
        </div>
    </div>
    <script>
        // 1.获取或者设置 元素的 文本内容 ；innerText 不能解析超文本  也不能获取超文本；
        /*  var ocont = document.querySelector(".cont");
                                                        console.log(ocont);
                                                        var obox = ocont.querySelector(".box");
                                                        console.log(ocont);
                                                        console.log(obox.innerText);
                                                        document.onclick = function() {
                                                            obox.innerText = "<h1>12</h1>";
                                                        }; */

        // 2.获取或者设置超文本内容  innerHTML; 可以解析超文本  也可以获取超文本；
        /*  var obox = document.querySelector(".box");
                                                    console.log(obox.innerHTML);
                                                    document.onclick = function() {
                                                        obox.innerHTML = "<h1>11</h1>";
                                                    }; */

        // 3.获取或者设置行间样式；style
        // 获取 行间的样式；
        var obox = document.querySelector(".box");
        console.log(obox);
        document.onclick = function() {
            console.log(obox.style["background-color"]);
        };

        // 设置行间样式
        document.onclick = function() {
            obox.style.backgroundColor = "pink";
        };

        // 4.获取或者设置类名；className
        // 获取 ；
        /*  var obox = document.querySelector(".box");
                      document.onclick = function() {
                          console.log(obox.className);
                      }; */
        // 设置
        /* document.onclick = function() {
                          var classStr = obox.className;
                          obox.className = classStr + "mydiv";
                          obox.className += "mydiv";
                      }; */

        // 5.元素的属性操作；
        // 一、获取元素的属性值；
        /*  var obox = document.querySelector(".box");
            document.onclick = function() {
                var res = obox.getAttribute("myid");
                console.log(res);
            }; */
        // 二、设置元素的属性；setAttribute
        /* var obox = document.querySelector(".box");
            document.onclick = function() {
                obox.setAttribute("myattr", "hello");
            }; */

        // 三 、删除属性removeAttribute("属性名");
        var obox = document.querySelector(".box");
        document.onclick = function() {
            obox.removeAttribute("id");
        };
    </script>
</body>

</html>